
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>作业4实现登录窗口的动画效果</title>
	<!-- <link rel="stylesheet" href="动画.css"> -->
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			/* 209001011 文连宇 */
			* {
				margin: 0;
				padding: 0;
			}

			a {
				text-decoration: none;
			}

			div {
				box-sizing: border-box;
			}

			.layout {
				display: flex;
			}

			.slider {
				width: 375px;
			}

			.img {
				width: 375px;
				background-image: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);
				background-size: cover;
				background-position: 50%;
				height: 100%;
			}

			.header {
				padding: 20px;
			}

			.iconsvg {
				display: inline-block;
				background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.-g6B_-VJVuXnSZQ4FjwqdwHaHX?pid=ImgDet&rs=1);
				width: 40px;
				height: 40px;
				background-size: cover;
			}

			.iconText {
				display: inline-block;
				font-size: 26px;
				font-weight: bold;
				width: 130px;
				height: 43px;
				line-height: 43px;
				text-align: center;
				vertical-align: top;
			}

			.aItem {
				color: #838383;
				display: inline-block;
				font-size: 14px;
				font-weight: 400;
				height: 40px;
				line-height: 40px;
				margin-left: 10px;
				margin-right: 10px;
			}

			.container .header {
				display: flex;
				width: 1150px;
				justify-content: space-between;
			}

			select {
				border: none;
			}

			.form {
				padding-top: 20px;
				width: 1150px;
			}

			.form .card {
				width: 450px;
				/* height: 567px; */
				margin: 0 auto;
				border-radius: 4px;
				box-shadow: 0 20px 50px 0 hsla(0, 0%, 64%, .1);
				padding: 40px 45px;
				overflow: hidden;
			}

			.form .card .content {
				width: 360px;
			}

			.tabList .loginText {
				font-size: 26px;
				color: #333;
				font-weight: 500;
				cursor: pointer;
			}

			.tabList .register {
				font-size: 26px;
				color: #838383;
				font-weight: 500;
				margin-left: 20px;
				cursor: pointer;
			}

			.tabList .line {
				width: 44px;
				height: 4px;
				border-radius: 2px;
				background-color: #ff5c00;
				transition: all .3s cubic-bezier(.645, .045, .355, 1);
			}

			.loginInput {
				margin-top: 20px;
			}

			.input {
				border: none;
				width: 366px;
				height: 61.6px;
				margin-left: -5px;
				margin-right: -5px;
				row-gap: 0px;
				background-color: #f9f9f9;
				font-size: 17px;
				text-indent: 50px;
				margin-top: 20px;
			}

			.loginInput .agree {
				margin-top: 20px;
				zoom: 150%;
				vertical-align: text-bottom;
				background-color: #f9f9f9;
			}

			.loginInput .agreetext {
				display: inline-block;
				margin-left: 5px;
			}

			.loginButton {
				color: #f9f9f9;
				opacity: 0. 4;
				margin-top: 20px;
				width: 100%;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				padding: 0 20px;
				text-align: center;
				background-color: #ff5c00;
				display: inline-block;
				font-size: 18px;
				font-weight: 400;
				height: 60px;
				line-height: 60px;
				overflow: hidden;
				position: relative;
				text-overflow: ellipsis;
				transition: all .3s cubic-bezier(.645, .045, .355, 1);
				vertical-align: top;
				white-space: nowrap;
			}

			.loginInput .forget {
				display: flex;
				color: #ff5c00;
				justify-content: space-between;
				margin-top: 20px;
			}

			.other .OtherWays {
				text-align: center;
				color: #838383;
				margin-top: 20px;
			}

			.otherIcon {
				border-radius: 23px;
				cursor: pointer;
				margin: 0 auto;
				display: block;
				font-size: 46px;
				height: 46px;
				overflow: hidden;
				width: 46px;
			}

			.allotherIcon {
				display: flex;
				margin-top: 20px;
			}

			.Alipay {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.c1a6b94ad66a97a88d1b691a01033029?rik=bbt08tjxc7nmgw&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f03%2f78%2ff6L7nVffr3.jpg&ehk=%2fc0f0h5q0GbzL0VImVV1iiHgT7DIrcYG2qOa3rP%2b5Ws%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.wechat {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.b4ae3496473df0a158d5b4927d3b74c1?rik=xVW%2fOYSozCCcrQ&riu=http%3a%2f%2fimages.shejidaren.com%2fwp-content%2fuploads%2f2020%2f03%2funnamed-file.png&ehk=N5w8ATecXx%2b1KWZ3xQORVtoIQU0Ijxz8%2bo6viRr14%2fE%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.qq {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.bb97706c05e4a10920865d748f1b5c8c?rik=7v6NCBtsq5VtrQ&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fwater%2f13451%2fgoods_water_13451_698_698_.png&ehk=Cz9nz7EpaPr9UAuXr0W9KN9EloqQ6ekPxhqAojv4O6E%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.microblog {
				background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.3bab951af42ef9e46e57c3e52634a07a?rik=fI%2ba%2fUXb9QnKyg&riu=http%3a%2f%2fimg.zcool.cn%2fcommunity%2f0104e9571c743432f875a399db949b.jpg%401280w_1l_2o_100sh.jpg&ehk=xeHg4gWw2KrvPfe8yldA7rIuBVVgmUwKVk%2fJUWw4Bms%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.apple {
				background: url(https://ts1.cn.mm.bing.net/th/id/R-C.dd71bb36caa57d3f044489d92a37349f?rik=F0O4xXomi2CHCw&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fw%2f2018%2f10-20%2f49967%2fwater_49967_698_857.4_.png&ehk=QelebY%2brtWjivs%2blC5KkT1IEcJYf9fOHoZv0ymzT0CE%3d&risl=&pid=ImgRaw&r=0);
				background-size: cover;
			}

			.copyRight {
				margin-top: 50px;
				text-align: center;
				color: #999;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.Fail {
				color: #ff5c00;
				margin-top: 20px;
			}

			.VerificationCode {
				width: 252px;
			}

			.Sendverificationcode {
				margin-top: 20px;
				display: block;
				width: 112px;
				line-height: 61.6px;
				background-color: #f9f9f9;
			}

			.Sendverificationcode:hover {
				cursor: pointer;
			}

			@keyframes jump-out {
				from {
					transform: scale(0.7) rotate(0deg);
				}

				to {
					transform: scale(1) rotate(360deg);
				}
			}

			.jump-out-enter-active {
				animation: jump-out reverse 2s;
			}

			.jump-out-enter-active {
				animation: jump-out 2.5s;
			}
		</style>
</head>

<body>
	<div id="app">
		<transition name="jump-out" appear>
			<div class="layout ">
				<div class="container">
					<div class="form">
						<div class="card">
							<div class="content">
								<div class="tabList">
									<div>
										<span class="loginText" @click="login"
											:style="{color:(islogin?'':'#838383')}">登录</span>
										<span class="register" @click="register"
											:style="{color:(islogin?'':'black')}">注册</span>
										<div class="line" :style="{marginLeft:(islogin?'':'80px')}">
										</div>
									</div>
								</div>
								<div class="loginInput" v-if="islogin">
									<form action="">
										<input type="text" class="input" placeholder="邮箱/手机号码/小米ID"
											v-model="account" required><br />
										<span style="color:#ff5c00 ;" v-if="Idinput">手机格式错误</span>
										<input type="password" class="input password" placeholder="密码"
											v-model="password" required>
										<input type="checkbox" class="agree"><span class="agreetext">已阅读并同意小米帐号 <a
												href="">用户协议</a> 和<a href="">
												隐私政策</a></span>
									</form>
									<button class="loginButton" @click="goLogin">登录</button>
									<div class="forget">
										<span>忘记密码？</span>
										<span>手机号登录</span>
									</div>
								</div>
								<div class="loginInput" v-if="!islogin">
									<form action="">
										<select name="" id="" class="input" v-model="area">
											<option :value="item.value" v-for="item in countries">{{item.name}}
											</option>
										</select>
										<input type="text" class="input password" placeholder="手机号" required
											v-model="phone" @blur="blur" ref="phoneRef">
										<span style="color:#ff5c00 ;" v-if="Verifiedbymobilephone">手机格式错误</span>
										<div style="display: flex;"> <input type="text" required
												class="input password VerificationCode" placeholder="请输入验证码"
												v-model="VerificationCode">
											<button style="border: none;" ref="btn" class="Sendverificationcode"
												@click.prevent="sendCode">
												{{this.time<=0?this.Sendverificationcode:this.time}}
												< /button>
										</div>
										<input type="checkbox" class="agree"><span class="agreetext">已阅读并同意小米帐号 <a
												href="">用户协议</a> 和<a href="">
												隐私政策</a></span>
									</form>
									<button class="loginButton" @click="goRegister">注册</button>
									<span class="Fail">收不到验证码？</span>
									<div class="forget">
										<span>忘记密码？</span>
										<span>手机号登录</span>
									</div>
								</div>
							</div>
							<div class="other">
								<div class="OtherWays">其他方式登录</div>
								<div class="allotherIcon">
									<span class="otherIcon Alipay"></span>
									<span class="otherIcon wechat"></span>
									<span class="otherIcon qq"></span>
									<span class="otherIcon microblog"></span>
									<span class="otherIcon apple"></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</div>
	</div>
	<script>
		const app = Vue.createApp({
			data() {
				return {
					Idinput: false,
					Verifiedbymobilephone: false,
					islogin: true,
					account: '',
					password: "",
					area: "zh",
					Sendverificationcode: "发送验证码",
					phone: "",
					VerificationCode: '',
					time: null,
					countries: [{
							name: '中国',
							value: "zh"
						},
						{
							name: '美国',
							value: "me"
						},
						{
							name: '法国',
							value: "Fr"
						},
						{
							name: '英国',
							value: "en"
						},
						{
							name: '俄罗斯',
							value: "ra"
						},
						{
							name: '德国',
							value: "ge"
						},
					]
				}
			},
			methods: {
				login() {
					this.islogin = true
				},
				register() {
					this.islogin = false
				},
				goLogin() {
					if (this.account === '' || this.password == '') {
						this.Idinput = true
						return
					}
					console.log('账号' + this.account, "密码" + this.password)
				},
				sendCode() {
					this.$refs.btn.disabled = true;
					this.time = 60
					setInterval(() => {
						if (this.time <= 0) {
							this.$refs.btn.disabled = false;
							return
						} else {
							this.time--
						}
					}, 1000);
				},
				goRegister() {
					if (this.phone === '' || this.VerificationCode === '') {} else {
						console.log('国家' + this.area, '号码' + this.phone, '验证码' + this.VerificationCode)
					}
				},
				blur() {
					let phoneValue = this.$refs.phoneRef.value
					const judgment = /^(?:(?:\+|00)86)?1\d{10}$/
					this.Verifiedbymobilephone = !judgment.test(phoneValue)
				},
			},
		})
		app.mount("#app")
	</script>
</body>
</html>